<template>
	<view class="payment-wrap " v-if="inquiry">
		<u-address></u-address>

		<view class="payment-title flex-row">订单信息</view>

		<view class="payment-goods-list">
			<view class="payment-goods-item" v-for="(item, index) in goodsList" :key="index">
				<view class="goods-item-main flex-row">
					<view class="goods-item-left"><image class="goods-item-pic" :src="item.thumbUrl"></image></view>

					<view class="goods-item-right">
						<view class="goods-name nowrap2">{{ item.name }}</view>
						<view class="goods-day">{{ item.spec }}</view>

						<view class="goods-btn flex-row">
							<view class="goods-price">{{ item.salePrice }}</view>
							<view class="goods-unit">元</view>
						</view>
					</view>

					<view class="goods-count">x{{ item.totalNum }}</view>
				</view>
			</view>
		</view>

		<view>
			<view class="goods-info-item flex-row">
				<view class="word-left">商品总价</view>
				<view class="word-right">￥{{ goodsAmount }}</view>
			</view>

			<view class="goods-info-item flex-row">
				<view class="word-left">配送方式</view>
				<view class="word-right">快递配送</view>
			</view>

			<view class="goods-info-item flex-row">
				<view class="word-left">配送费</view>
				<view class="word-right">{{ transportPrice > 0 ? '￥' + transportPrice : '免配送费' }}</view>
			</view>
			<view class="goods-info-item flex-row">
				<view class="word-left">小计</view>
				<view class="word-right">￥{{ totalAmount }}</view>
			</view>
		</view>

		<!-- 	<view class="payment-type">
			<view class="payment-type-title">支付方式</view>
			<view class="payment-type-main flex-row">
				<view :class="['payment-type-item', 'flex-row', order.payChannel == 0 ? 'payment-type-selected' : '']" @click="order.payChannel = 0">
					<image src="https://cdn.quantifynet.cn/dti/icon_wechat_pay@2x.png" class="payment-type-icon"></image>
					<view class="payment-type-info">微信支付</view>
					<image v-if="order.payChannel == 0" class="payment-type-selected" src="https://cdn.quantifynet.cn/dti/icon_choose_pay_selected@2x.png"></image>
				</view>

				<view :class="['payment-type-item', 'flex-row', order.payChannel == 1 ? 'payment-type-selected' : '']" @click="order.payChannel = 1">
					<image src="https://cdn.quantifynet.cn/dti/icon_ailypay@2x.png" class="payment-type-icon"></image>
					<view class="payment-type-info">支付宝支付</view>
					<image v-if="order.payChannel == 1" class="payment-type-selected" src="https://cdn.quantifynet.cn/dti/icon_choose_pay_selected@2x.png"></image>
				</view>
			</view>
		</view> -->
		<u-bottom-button value="确认支付" @click="createOrder()"></u-bottom-button>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			settlementModel: 0, //0商品结算  1购物车结算
			goodsId: null, //商品id
			goodsList: [], //商品列表

			/**
			 * 订单数据
			 */
			order: {
				orderType: 0, //订单类型 0商城订单
				payChannel: 0, //支付渠道
				address: null, //地址
				orderGoodsList: [] //订单商品数据
			},

			goodsAmount: 0, //商品总价
			totalAmount: 0, //总金额
			transportPrice: 0, //配送费

			orderId: null //支付成功订单id
		};
	},

	onLoad(option) {
		this.settlementModel = option.settlementModel;
		this.goodsId = option.goodsId;

		if (this.settlementModel == 0) {
			this.goodsDetail();
		} else {
			this.findByUserIdShoppingCart();
		}
	},

	onShow() {},
	onHide() {},
	onUnload() {},
	computed: {
		...mapState({
			userAddress: state => state.userAddress
		})
	},
	methods: {
		/**
		 * 查询商品详情
		 */
		goodsDetail() {
			

			this.$api
				.goodsDetail({
					params: {
						id: this.goodsId
					}
				})
				.then(res => {
					if (res.code == 200) {
						res.result.totalNum = 1;
						this.goodsList.push(res.result);
						this.countItemPrice();
					}
				});
		},

		/**
		 * 查询购物车
		 */
		findByUserIdShoppingCart() {
			this.$api.findByUserIdShoppingCart({}).then(res => {
				if (res.code == 200) {
					res.result.forEach(item => {
						item.goods.totalNum = item.num;
						this.goodsList.push(item.goods);
					});
					this.countItemPrice();
				}
			});
		},

		/**
		 * 统计各项费用
		 */
		countItemPrice() {
			this.goodsAmount = 0;
			this.payAmount = 0;
			this.transportPrice = 0;
			this.goodsList.forEach(res => {
				this.goodsAmount += +res.salePrice * +res.totalNum;
				this.transportPrice += +res.transportPrice;
			});

			this.payAmount = this.goodsAmount + this.transportPrice;
			this.totalAmount = this.payAmount;
			console.log('this.payAmount = '+this.payAmount)
			console.log('this.totalAmount = '+this.totalAmount)
		},

		/**
		 * 清空购物车
		 */
		cleanShoppingCart() {
			this.$api.cleanShoppingCart({});
		},

		/**
		 * 生成订单商品数据
		 */
		createOrderGoods() {
			this.order.orderGoodsList = [];

			this.goodsList.forEach(item => {
				this.order.orderGoodsList.push({
					goodsId: item.id,
					totalNum: item.totalNum
				});
			});

			this.order.addressDetail = JSON.stringify(this.userAddress);
		},

		/**
		 * 创建订单
		 */
		createOrder() {
			if (!this.userAddress) {
				uni.showToast({
					title: '未选择收货地址',
					icon: 'none'
				});

				return;
			}

			//生成订单商品数据
			this.createOrderGoods();

			this.$api
				.createOrder({
					data: this.order
				})
				.then(res => {
					if (res.code == 200) {
						//购物车结算清空购物车
						if (this.settlementModel == 1) {
							this.cleanShoppingCart();
						}
						this.orderId = res.result.orderId;
						this.wxRequestPayment(res.result.pay);
					}
				});
		},

		//微信小程序拉起支付
		wxRequestPayment(res) {
			wx.requestPayment({
				timeStamp: res.timeStamp,
				nonceStr: res.nonceStr,
				package: res.packageValue,
				signType: res.signType,
				paySign: res.paySign,
				success: success => {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});
					uni.redirectTo({
						url: '/pages-client/store/paySuccess?orderId=' + this.orderId
					});
				},
				fail: error => {
					uni.showToast({
						title: '取消支付',
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.payment-wrap {
	padding-bottom: 200rpx;

	.payment-title {
		width: 750rpx;
		height: 116rpx;
		padding-left: 32rpx;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(51, 51, 51, 1);
		font-size: 30rpx;
		font-family: PingFang-SC-Bold;
		box-sizing: border-box;
		align-items: center;
		font-weight: 400;
		border-bottom: 1rpx solid #f9f8f6;
	}

	.payment-goods-list {
		padding: 0 40rpx;
		margin-bottom: 24rpx;
		background-color: rgba(255, 255, 255, 1);
		.payment-goods-item {
			background-color: rgba(255, 255, 255, 1);
			border-bottom: 1rpx solid rgba(51, 51, 51, 0.1);
			padding-bottom: 27rpx;
			.goods-item-head {
				width: 132rpx;
				height: 52rpx;
				// margin-bottom: 22rpx;
				display: block;
			}

			.goods-item-main {
				padding-top: 30rpx;
				.goods-item-left {
					width: 150rpx;
					height: 150rpx;
					border-radius: 12rpx;
					border: 1rpx solid rgba(234, 234, 239, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 30rpx;
					.goods-item-blind {
						width: 84rpx;
						height: 107rpx;
					}
					.goods-item-pic {
						width: 146rpx;
						height: 146rpx;
					}
				}

				.goods-item-right {
					z-index: auto;
					width: 424rpx;
					height: 170rpx;
					display: flex;
					flex-direction: column;
					.goods-name {
						font-size: 30rpx;
						font-family: STSongti-SC-Black, STSongti-SC;
						font-weight: 900;
						color: #333333;
						line-height: 46rpx;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.goods-day {
						font-size: 28rpx;
						font-family: STSongti-SC-Regular, STSongti-SC;
						font-weight: 400;
						color: #333333;
						line-height: 46rpx;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.goods-btn {
						width: 179rpx;
						height: 54rpx;
						border-radius: 27rpx;
						margin-top: 24rpx;
						align-items: center;
						.goods-price {
							font-size: 38rpx;
							font-family: STSongti-SC-Regular, STSongti-SC;
							font-weight: 400;
							color: #891e07;
						}
						.goods-unit {
							font-size: 24rpx;
							font-family: STSongti-SC-Regular, STSongti-SC;
							font-weight: 400;
							color: #891e07;
							margin-top: 4rpx;
						}
					}
				}

				.goods-count {
					font-size: 34rpx;
					font-family: STSongti-SC-Bold, STSongti-SC;
					font-weight: bold;
					color: #333333;
					margin-top: 48rpx;
				}
			}
		}
	}

	.goods-info-item {
		height: 96rpx;
		width: 750rpx;
		background-color: rgba(255, 255, 255, 1);
		margin-bottom: 1rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		.word-left {
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Regular;
		}
		.word-right {
			color: rgba(153, 153, 153, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Regular;
		}
	}

	.payment-type {
		width: 750rpx;
		border: 1rpx solid rgba(255, 255, 255, 1);
		background-color: rgba(255, 255, 255, 1);
		margin-top: 24rpx;
		padding: 27rpx 30rpx;
		box-sizing: border-box;
		.payment-type-title {
			height: 40rpx;
			display: flex;
			align-items: center;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFangSC-Regular;
			margin-bottom: 30rpx;
		}

		.payment-type-main {
			align-items: center;
			.payment-type-item {
				width: 212rpx;
				height: 93rpx;
				margin-right: 20rpx;
				border-radius: 6rpx;
				border: 1rpx solid #bbbbc3;
				justify-content: center;
				align-items: center;
				position: relative;
				.payment-type-icon {
					width: 35rpx;
					height: 32rpx;
					margin-right: 10rpx;
					margin-top: 4rpx;
				}
				.payment-type-info {
					white-space: nowrap;
					color: rgba(51, 51, 51, 1);
					font-size: 26rpx;
					font-family: PingFang-SC-Medium;
					text-align: center;
				}
				.payment-type-selected {
					border: none;
					position: absolute;
					top: 0;
					left: 0;
					width: 212rpx;
					height: 93rpx;
				}
			}

			.payment-type-selected {
				border: none;
			}
		}
	}
}
</style>
